<template>
    <div class="wechat-wrapper">
        <div class="content-wrapper">
            <p class="pay">实付款：<span class="price">￥{{ ($route.query.total*1).toFixed(2) }}</span></p>
            <p class='notice'>请在24小时内完成支付，否则可能导致购买失败</p>
            <div class="QRpic-wrapper">
               <div class="QRcode-wrapper">
                   <div class="QRcode">
                       <qrcode style="width: 100%; height: 100%;" v-model="qrcode"></qrcode>
                   </div>
                   <p class="pay-text">请打开手机微信，扫一扫完成支付</p> 
               </div>
               <div class="wechat-pic">
                   <img src="../../images/shouji.png" alt="">
                </div> 
            </div>
            
        </div>
    </div>
</template>
<script>
import Vue from 'vue'
import VueQrcode from '@xkeshi/vue-qrcode'
import { queryQueryWechat, queryPolyqWechat} from 'api/getData'
export default {
  data() {
    return {
      qrcode: this.$route.query.code_url
    }
  },
  components: {
    qrcode: VueQrcode
  },
  mounted() {
    this.queryOrder()
  },
  methods: {
    toUnicodeFun(data){
      var str =''; 
      for(var i=0;i<data.length;i++){
          str+="\\u"+data.charCodeAt(i).toString(16);
      }
      return str;
    },
    queryOrder() {
      queryPolyqWechat(this.$route.query.no).then(res => {
        if (res.trade_state === 'success') {
          this.$router.replace({ path: '/paySuccee', query: {courseId: this.toUnicodeFun(this.$route.query.courseId.toString()) } })
        } else {
          setTimeout(() => {
            this.queryOrder();
          }, 3000);
        }
      })
      // queryQueryWechat(this.$route.query.no).then(res => {
      //   if (res.trade_state === 'SUCCESS') {
      //     this.$router.replace({ path: '/paySuccee', query: {courseId: this.toUnicodeFun(this.$route.query.courseId.toString()) } })
          
      //   } else {
      //     setTimeout(() => {
      //       this.queryOrder();
      //     }, 3000);
      //   }
      // })
    }
  }
}
</script>
<style scoped lang="stylus" rel="stylesheet/stylus">
@import '~style/base.styl';

.wechat-wrapper {
  width: 1000px;
  height: 400px;
  margin: 23px auto 95px;
  color: $color-text-mt;
  background-color: $color-text;

  .notice {
    margin: 14px 0 30px;
    font-size: $font-size-medium;
  }

  .content-wrapper {
    width: 475px;
    padding-top: 35px;
    margin: 0 auto;

    .QRpic-wrapper {
      position: relative;
      width: 100%;

      .QRcode-wrapper {
        position: absolute;
        top: -13px;
        left: -13px;
        width: 235px;
        .QRcode{
          height: 235px;
        }

        .pay-text {
          margin: 0;
          padding: 0;
          font-weight: bold;
          font-size: $font-size-medium;
          color: #1AB021;
          text-indent: 11px;
        }
      }

      .wechat-pic {
        position: absolute;
        top: 0;
        left: 290px;
        width: 183px;
      }
    }
  }

  .pay {
    font-size: $font-size-medium;
    font-weight: bold;

    .price {
      color: $color-sub-pay;
      font-size: $font-size-large-l;
    }
  }
}
</style>


